import React, {Component} from 'react';
import Avatar from 'material-ui/Avatar';
import Dialog from 'material-ui/Dialog';
import FontIcon from 'material-ui/FontIcon';
import { Tabs, Tab } from 'material-ui/Tabs';
import { CardHeader } from 'material-ui/Card';
import { List, ListItem } from 'material-ui/List';
import FloatingActionButton from 'material-ui/FloatingActionButton';

import { Link } from 'react-router';
import { moment } from '../Utils/Helper';

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tabsValue: 'activities',
      openInfo: false
    };
  }
  
  componentWillReceiveProps (nextProps) {
    let tabsValue;

    if (nextProps.url.indexOf('edit') !== -1) {
      tabsValue = 'edit';
    } else if (nextProps.url.indexOf('tweets') !== -1) {
      tabsValue = 'tweets';
    } else {
      tabsValue = 'activities';
    }

    this.setState({tabsValue});
  }

  /**
   * 开启会话框
   */
  handleopen = (n) => {
    this.setState({[n]: true});
  };

  /**
   * 关闭会话框
   */
  handleClose = (n) => {
    this.setState({[n]: false});
  };

  /**
   * 渲染tab
   */
  _renderTab(count, name) {
    return (
      <div>
        <span style={{fontSize: 16}}>{count}</span><br/>
        <span style={{fontSize: 12}}>{name}</span>
      </div>
    );
  }

  /**
   * 渲染用户个人信息主标题
   */
  _renderTitle(userName, state) {
    return (
      <div>
        <span>{userName} </span> 
        {state ? 
          <span style={{fontSize: 14}}>
            <FontIcon 
              style={{fontSize: 14}} 
              className='icon-favorite_border' 
              color='#fff'
            />
            {state}
          </span>
        : ''}
      </div>
    );
  }

  /**
   * 渲染用户个人信息副标题
   */
  _renderSubtitle(phone, birth, notes) {
    return (
      <div>
        {birth ? 
          <p style={{lineHeight: 1.428, marginTop: 8, marginBottom: 0}}>
            <FontIcon 
              style={{fontSize: 14}} 
              className='icon-cake' 
              color='#fff'
            />&nbsp;&nbsp;
            <span>{moment(new Date(birth)).format('ll')}诞生</span>
          </p>
           : ''
        }
        <p style={{lineHeight: 1.428, color: this.props.color100}}>{notes}</p>
        <a 
          className="visible-xs" 
          style={{
            color: '#fff',
            fontSize: 14,
          }}
          onClick={this.props.pushTo.bind(this, `/user/${this.props.data.id}/edit`)}
        >
          修改个人资料 <FontIcon 
            className="icon-border_color" 
            color='#fff' 
            style={{fontSize: 12}}
          />
        </a>
      </div>
    );
  }

  /**
   * 开启用户信息会话框
   */
  _renderInfoDialog(userName, college, professional) {
    return (
      <Dialog
        modal={false}
        open={this.state.openInfo}
        onRequestClose={this.handleClose.bind(this, 'openInfo')}
        overlayStyle={{backgroundColor: 'rgba(0,0,0,0.12)'}}
        contentStyle={{width: '100%', maxWidth: 480}}
        bodyStyle={{padding: 0}}
      >
        <List>
          <ListItem 
            primaryText={userName} 
            disabled={true}
            leftIcon={<FontIcon className="icon-person" />}
          />
          <ListItem 
            primaryText={college} 
            disabled={true}
            leftIcon={<FontIcon className="icon-school" />}
          />
          <ListItem 
            primaryText={professional} 
            disabled={true}
            leftIcon={<FontIcon className="icon-work" />}
          />
        </List>
      </Dialog>
    );
  }

  render() {
    const { data, color100, color500, isCurrentUser } = this.props;

  	return (
  	  <div 
        className="profile-header"
        style={{
          position: 'relative',
          minHeight: 200, 
          backgroundColor: color500,
          boxShadow: 'rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px'
        }}
      >
        <CardHeader
          style={{paddingLeft: 0, paddingTop: 128}}
          avatar={
            <Avatar
              src={data.user_img}
              size={64}
            />
          }
          title={this._renderTitle(data.user_name, data.state)}
          subtitle={this._renderSubtitle(data.phone, data.birth, data.notes)}
          titleStyle={{fontSize: 20, color: '#fff'}}
          subtitleStyle={{fontSize: 14, color: '#fff'}}
        />

        <Tabs
          value={this.state.tabsValue}
          inkBarStyle={{backgroundColor: '#fff'}}
          tabItemContainerStyle={{
            backgroundColor: color500,
            marginLeft: 'auto', 
            marginRight: 'auto'
          }}
          tabTemplateStyle={{width: 72}}
          style={{
            width: 216
          }}
        >
          <Tab
            value='activities'
            label={this._renderTab(data.activity_count, '活动')}
            onActive={this.props.pushTo.bind(this, `/user/${data.id}`)}
          />
          <Tab
            value='tweets'
            label={this._renderTab(data.tweet_count, '分享')}
            onActive={this.props.pushTo.bind(this, `/user/${data.id}/tweets`)}
          />
        </Tabs>

        <FloatingActionButton 
          className="profile-float-btn"
          children={
            <FontIcon 
              className='icon-school' 
              color='#fff'
            />
          }
          onTouchTap={this.handleopen.bind(this, 'openInfo')}
        />

        {isCurrentUser ? 
          <FloatingActionButton
            className="visible-sm visible-md visible-lg"
            style={{
              position: 'absolute',
              bottom: -28,
              right: 216,
            }}
            backgroundColor={'#fff'}
            iconStyle={{color: color500}}
            children={
              <FontIcon 
                className='icon-mode_edit' 
              />
            }
            onTouchTap={this.props.pushTo.bind(this, `/user/${data.id}/edit`)}
          />
        : ''}

        {this._renderInfoDialog(data.user_name, data.college, data.professional)}
      </div>
  	);
  }
};
/**
<FontIcon 
  style={{fontSize: 14}} 
  className='icon-phone' 
  color='#fff'
/>&nbsp;&nbsp;
{phone}
 */